<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		#box{
			position: relative;
		}
	</style>
	<script type="text/javascript">
		function checkHeight(obj){
			var height=100000;
			var index=0;
			for (var i = 0; i < obj.length; i++) {
				var now_height=obj[i];
				if (now_height<height) {
					height=now_height;
					index=i;
				}
			}
			return index;
		}
		window.onload=function(){
			//1.获取浏览器的宽高
			var oBox=document.getElementById('box');
			var vH=document.documentElement.clientHeight;
			var vW=document.documentElement.clientWidth;
			//alert(vH);
			//alert(vW);
			//2.计算容器中最多容纳div个数，使用Math.floor向下取整
			var default_width=230 +16;
			var div_num=Math.floor(vW/default_width);
			//3.获得剩余空间设置居中
			oBox.style.width=default_width*div_num+'px';
			oBox.style.height='1000px';
			oBox.style.background='#e2e2e2';
			oBox.style.margin='0 auto';
			//4.初始化一个高度数组
			var arrHeight=[0,0,0,0,0,0,0]; 
			//5.循环创建元素
			createElement();
			function createElement(){
				for (var i = 0; i <= 30; i++) {

					// var oImg=document.createElement('img');
					// oImg.src="imaegs/"+i+".jpg";
					var oDiv=document.createElement('div');
					oDiv.style.width=230+'px';
					var height=parseInt(Math.random()*(350-250)+250);
					oDiv.style.background='rgb('+parseInt(Math.random()*(256-1)+1)+','+parseInt(Math.random()*(256-1)+1)+','+parseInt(Math.random()*(256-1)+1)+')';
					oDiv.style.height=height+'px';
					oDiv.innerHTML=i;
					// oDiv.appendChild(oImg);
					 oDiv.style.position='absolute';
					//6.获得最小的列
					var min_height=checkHeight(arrHeight);
					//7.设置div定位
					oDiv.style.top=arrHeight[min_height]+'px';
					oDiv.style.left=min_height*default_width+'px';
					//8.跟随内容
					oBox.appendChild(oDiv);
					//9.更新高度数组
					arrHeight[min_height]+=oDiv.offsetHeight+8;
				}
			}
			
			window.onscroll=function(){
				var sT=document.documentElement.scrollTop||document.body.scrollTop;
				if (sT+vH>document.body.scrollHeight*0.8) {
					createElement();
				}
			}
		}
		
	</script>
</head>
<body>
	<div id="box">
		
	</div>
</body>
</html>